import { makeStyles, mergeClasses } from '@griffel/react';
import type { {{componentName}}State } from './{{componentName}}.types';


export const {{componentNames.propertyName}}ClassName = 'fui-{{componentName}}'
/**
 * Styles for the root slot
 */
const useStyles = makeStyles({
  root: {
      // TODO Add default styles for the root element
  },

  // TODO add additional classes for different states and/or slots
});

/**
 * Apply styling to the {{componentName}} slots based on the state
 */
export const use{{componentName}}Styles_unstable = (state: {{componentName}}State): {{componentName}}State => {
  const styles = useStyles();
  state.root.className = mergeClasses({{componentNames.propertyName}}ClassName, styles.root, state.root.className);

  // TODO Add class names to slots, for example:
  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

  return state;
};
